<!--
 * @Author: huangyq
 * @Date: 2022-04-20 14:02:02
 * @LastEditTime: 2022-06-14 13:50:34
 * @LastEditors: huangyq
 * @Description: 子级菜单
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/components/qt3-sidebar/SubMenu.vue
-->
<template>
  <el-sub-menu :index="index">
    <template #title>
      <i :class="['iconfont', props.menu.meta?.icon]"></i>
      <span>{{ props.menu.meta?.title }}</span>
    </template>
    <template v-for="subMenu in props.menu.children" :key="subMenu.name">
      <sub-menu
        v-if="subMenu.children && subMenu.children.length > 0"
        :menu="subMenu"
      ></sub-menu>
      <menu-item v-else :menu="subMenu"></menu-item>
    </template>
  </el-sub-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { RouteRecordRaw } from 'vue-router'
import MenuItem from './MenuItem.vue'

interface IProp {
  menu: RouteRecordRaw
}
const props = withDefaults(defineProps<IProp>(), {})
const index = computed(() => {
  return (props.menu?.name as string) || (Math.random() * 10000).toString()
})
</script>

<style scoped lang="scss">
.iconfont {
  margin-right: 5px;
}
</style>
